// //面向过程
// ;(function(){
//     //获取当前box1所有标题
//     let liObjs = document.querySelectorAll('.box1 ul li')
//     //遍历所有标题
//     liObjs.forEach(function(item,i){
//         //给每个标题绑定鼠标移入事件
//         item.onmouseover = function(){
//             //清除之前标题上的class
//             document.querySelector('.box1 ul li.active').className = ''
//             //给当前标题加class
//             liObjs[i].className = 'active'
//             //同步内容
//             //清除之前内容上的class
//             document.querySelector('.box1 ol li.active').className = ''
//             //给当前标题对应的内容加class
//             document.querySelectorAll('.box1 ol li')[i].className = 'active'
//         }
//     })
// })()

// ;(function(){
//     //获取当前box1所有标题
//     let liObjs = document.querySelectorAll('.box2 ul li')
//     //遍历所有标题
//     liObjs.forEach(function(item,i){
//         //给每个标题绑定鼠标移入事件
//         item.onmouseover = function(){
//             //清除之前标题上的class
//             document.querySelector('.box2 ul li.active').className = ''
//             //给当前标题加class
//             liObjs[i].className = 'active'
//             //同步内容
//             //清除之前内容上的class
//             document.querySelector('.box2 ol li.active').className = ''
//             //给当前标题对应的内容加class
//             document.querySelectorAll('.box2 ol li')[i].className = 'active'
//         }
//     })
// })()



//面向对象

function Tab(el){ //this -> box1/box2
    //将box存放在el里
    this.el = document.querySelector(el)

    //启动插件
    this.init()
}
Tab.prototype.init = function(){ //this -> box1/box2
    //获取当前box的所有标题
    let liObjs = this.el.querySelectorAll('ul li')
    //遍历
    liObjs.forEach((item,i) => {  //this -> window
        //给每个标题绑定鼠标移入事件
        item.onmouseover = () => { //this -> 事件源 就是item item就是标题的li标签
            //清除标题之前的class
            this.el.querySelector('ul li.active').className = ''
            //给当前的标题加class
            liObjs[i].className = 'active'
            //同步内容
            //清除内容之前的class
            this.el.querySelector('ol li.active').className = ''
            //给当前标题对应的内容加class
            this.el.querySelectorAll('ol li')[i].className = 'active'
        }
    });
}

